<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>上线单</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="./node_modules/light7/dist/css/light7.min.css">
    <link rel="stylesheet" href="./node_modules/light7/dist/css/light7-swiper.min.css">

    <link rel="stylesheet" href="./css/hello.css">
</head>
<body>
<div class="page">
    <!-- 工具栏 -->
    <nav class="bar bar-tab">
        <a class="tab-item active changeToOne" href="#">
            <span class="icon icon-home"></span>
            <span class="tab-label">信息填写</span>
        </a>
        <a class="tab-item changeToTwo" href="#">
            <span class="icon icon-star"></span>
            <span class="tab-label">上线单填写</span>
        </a>
        <a class="tab-item changeToThree" href="#">
            <span class="icon icon-settings"></span>
            <span class="tab-label">历史记录</span>
        </a>
    </nav>
<header class="bar bar-nav">
    <h1 class="title">上线单填报</h1>
</header>
<div class="content">
    <div class="content-block-title">内容</div>
    <div class="list-block media-list">
        <ul>
            <li>
                <a href="#" class="item-link item-content">
                    <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 4rem;'></div>
                    <div class="item-inner">
                        <div class="item-title-row">
                            <div class="item-title">版本号</div>
                            <div class="item-after">V2.1.4</div>
                        </div>
                        <div class="item-subtitle">备注</div>
                        <div class="item-text">此处是文本内容...</div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div class="content-block-title">同时发送邮件给</div>
    <div class="list-block media-list">
        <ul>
            <li>
                <a href="#" class="item-link item-content">
                    <div class="item-inner">
                        <div class="item-title-row">
                            <div class="item-title">Email</div>
                            <div class="item-after">17:14</div>
                        </div>
                        <div class="item-subtitle">子标题</div>
                        <div class="item-text">此处是文本内容...</div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div class="content-block-title">简单说明</div>
    <div class="list-block media-list">
        <ul>
            <li>
                <div class="item-content">
                    <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                    <div class="item-inner">
                        <div class="item-title-row">
                            <div class="item-title">标题</div>
                        </div>
                        <div class="item-subtitle">子标题</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <p><a href="#" class="button button-dark">提交</a></p>

</div>
    <!-- 你的html代码 -->
    <script type='text/javascript' src='./node_modules/jquery/dist/jquery.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='./node_modules/light7/dist/js/light7.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='./node_modules/light7/dist/js/light7-swiper.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="./js/anotherJs/juicer-min.js"></script>
    <script src="./js/show.js"></script>

    <script type="text/template" id="tpl">
        {@each TestOutput as it}  <!--这里的TestOutput是后端传回前端MAP的KEY，value是一个outputList-->
        <ul>
            <li class="item-content">
                <div class="item-media"><img src="./img/dior.jpg" height="30px" width="30px"></div>
                <div class="item-inner">
                    <div class="item-title">${it.userName}</div>
                    <div class="item-after">${it.mes}
                    </div>
                </div>
            </li>
        </ul>
        {@/each}
    </script>
</div>
</body>
</html>